"use client"

import { AuthGuard } from "@/components/auth-guard"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Plus, Play, Pause, MoreVertical, Copy, Trash2 } from "lucide-react"
import Link from "next/link"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

const workflows = [
  {
    id: "1",
    name: "客户服务自动化",
    description: "自动处理客户咨询并生成回复",
    type: "Dify",
    status: "active",
    executions: 1234,
    lastRun: "2 分钟前",
  },
  {
    id: "2",
    name: "数据分析流程",
    description: "收集、处理和分析业务数据",
    type: "LangGraph",
    status: "active",
    executions: 856,
    lastRun: "15 分钟前",
  },
  {
    id: "3",
    name: "内容生成工作流",
    description: "基于模板自动生成营销内容",
    type: "Coze",
    status: "paused",
    executions: 432,
    lastRun: "2 小时前",
  },
  {
    id: "4",
    name: "邮件营销自动化",
    description: "定时发送个性化营销邮件",
    type: "Dify",
    status: "active",
    executions: 2341,
    lastRun: "30 分钟前",
  },
]

export default function WorkflowsPage() {
  return (
    <AuthGuard>
      <DashboardLayout>
        <div className="space-y-6">
          {/* Header */}
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold tracking-tight">工作流管理</h1>
              <p className="text-muted-foreground mt-2">创建和管理您的 AI 工作流</p>
            </div>
            <Link href="/dashboard/workflows/new">
              <Button>
                <Plus className="mr-2 h-4 w-4" />
                创建工作流
              </Button>
            </Link>
          </div>

          {/* Workflows Grid */}
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {workflows.map((workflow) => (
              <Card key={workflow.id} className="hover:shadow-md transition-shadow">
                <CardHeader>
                  <div className="flex items-start justify-between">
                    <div className="space-y-1 flex-1">
                      <CardTitle className="text-lg">{workflow.name}</CardTitle>
                      <CardDescription className="line-clamp-2">{workflow.description}</CardDescription>
                    </div>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                          <MoreVertical className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem>
                          <Copy className="mr-2 h-4 w-4" />
                          复制
                        </DropdownMenuItem>
                        <DropdownMenuItem className="text-destructive">
                          <Trash2 className="mr-2 h-4 w-4" />
                          删除
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex items-center gap-2">
                    <Badge variant="outline">{workflow.type}</Badge>
                    <Badge variant={workflow.status === "active" ? "default" : "secondary"}>
                      {workflow.status === "active" ? "运行中" : "已暂停"}
                    </Badge>
                  </div>
                  <div className="flex items-center justify-between text-sm text-muted-foreground">
                    <span>执行次数: {workflow.executions}</span>
                    <span>{workflow.lastRun}</span>
                  </div>
                  <div className="flex gap-2">
                    <Link href={`/dashboard/workflows/${workflow.id}`} className="flex-1">
                      <Button variant="outline" className="w-full bg-transparent">
                        编辑
                      </Button>
                    </Link>
                    <Button variant="outline" size="icon">
                      {workflow.status === "active" ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </DashboardLayout>
    </AuthGuard>
  )
}
